<!-- 联系人 -->
<template>
  <div class='contacts' v-loading="loading">
    <div class="recent contacts recentContacts"> <span class="recent">简历介绍</span></div>
    <div v-if="isShresume">
      <el-scrollbar>
        <div class="contactsInfo" ref="contactsInfo">
          <!-- 头像 名称 -->
          <div class="avatarInfo">
            <el-avatar :size="70" :src="resumeData.photo"
              :class="{ 'portraitBox': resumeData.sex == 1, 'portraitGirl': resumeData.sex != 1 }">
            </el-avatar>
            <!-- 名称 -->
            <span class="name">{{resumeData.name || '暂无'}}</span>
          </div>
          <!-- 简介 -->
          <div>
            <p class="brief">
              <!-- 性别 -->
              <span v-if="resumeData.sexText">{{resumeData.sexText}}</span>
              <el-divider direction="vertical" v-if="resumeData.sexText"></el-divider>

              <!-- 年龄 生日 -->
              <span v-if="resumeData.birthday">
                {{new Date().getFullYear()-parseInt(resumeData.birthday)}}岁（{{resumeData.birthday.slice(0,10)}}）&nbsp;</span>
              <el-divider direction="vertical" v-if="resumeData.birthday"></el-divider>

              <!-- 学历 -->
              <span v-if="resumeData.educationText"> {{resumeData.educationText}}</span>
              <el-divider direction="vertical" v-if="resumeData.educationText"></el-divider>
              <!-- 婚否 -->
              <span v-if="resumeData.maritalStatusText">{{resumeData.maritalStatusText}}</span>
              <el-divider direction="vertical" v-if="resumeData.maritalStatusText"></el-divider>
              <!-- 工作年限 -->
              <span v-if="resumeData.currentStatusText">{{resumeData.currentStatusText}}</span>
              <el-divider direction="vertical" v-if="resumeData.nation"></el-divider>
              <!-- 民族 -->
              <span v-if="resumeData.nation">{{resumeData.nation}}</span>
              <el-divider direction="vertical" v-if="resumeData.nation"></el-divider>
              <!-- 政治面貌 -->
              <span>{{resumeData.politicalStatus}}</span>
            </p>
            <!-- 现居住地： -->
            <p class="brief" v-if="resumeData.currentResidenceText">现居住地：{{resumeData.currentResidenceText}}</p>
            <!-- 户籍地： -->
            <p class="brief" v-if="resumeData.domicilePlaceText">户籍地：{{resumeData.domicilePlaceText}}</p>
            <p class="brief">
              <!-- 身高： -->
              <span v-if="resumeData.height">身高：{{resumeData.height}}cm</span>
              <el-divider v-if="resumeData.weight" direction="vertical"></el-divider>
              <!-- 体重： -->
              <span v-if="resumeData.weight">体重：{{resumeData.weight}}</span>
              <el-divider direction="vertical" v-if="resumeData.visionText"></el-divider>
              <!-- 视力状况 -->
              <span v-if="resumeData.visionText">视力状况：{{resumeData.visionText}}</span>
            </p>
            <!-- 职称级别： -->
            <p class="brief" v-if="resumeData.titleLevelText">职称级别：{{resumeData.titleLevelText}}</p>
          </div>
          <!-- 联系信息 -->
          <categoryIntroduction slotName="contact" :resumeInfo="resumeData" titleName="联系信息"
            v-if="switchContactsInfo.isShowResumeContact == 1 || isShowResumeContact == 1">
            <div slot="contact" slot-scope="scope">
              <li class="brief">手机号码：{{scope.data.phone || '暂无'}}</li>
              <li class="brief">邮箱：{{scope.data.mail || '暂无'}}</li>
              <li class="brief">QQ号：{{scope.data.qq || '暂无'}}</li>
              <li class="brief">微信号：{{scope.data.wechat || '暂无'}}</li>
              <li class="brief">通讯地址：{{scope.data.mailingAddress || '暂无'}}</li>
              <li class="brief">个人主页：
                <a :href="scope.data.homepage" target="_blank">{{scope.data.homepage || '暂无'}}</a></li>
            </div>
          </categoryIntroduction>

          <!-- 求职意向 -->
          <categoryIntroduction slotName="JobHunting" :resumeInfo="resumeData" titleName="求职意向">
            <div slot="JobHunting" slot-scope="scope">
              <li class="brief">目前状态：{{scope.data.currentStatusText || '暂无'}}</li>
              <li class="brief">期望职位：{{scope.data.hopeJobText || '暂无'}}</li>
              <li class="brief">期望行业：{{scope.data.hopeTradeText || '暂无'}}</li>
              <li class="brief">期望工作地点：{{scope.data.workPlaceText || '暂无'}}</li>
              <li class="brief">期望工作方式：{{scope.data.workModeText || '暂无'}}</li>
              <li class="brief">期望薪资：{{scope.data.hopeWage || '暂无'}}</li>
              <li class="brief" v-if="scope.data.needTrain">是否需要技能培训：{{scope.data.needTrain ?'是':'否'}}</li>
            </div>
          </categoryIntroduction>

          <!-- 教育经历 -->
          <categoryIntroduction slotName="Educational" :resumeInfo="resumeData" titleName="教育经历">
            <div slot="Educational" slot-scope="scope">
              <li v-for="(item,index) in scope.data.eduInfoOutVos" :key="index" class="brief">
                <p>{{item.eduTime || '2013.08- 2017.7'}}</p>
                <p>{{item.school || '暂无'}} | {{item.major || '暂无'}} | {{item.educationText || '暂无'}}</p>
              </li>
            </div>
          </categoryIntroduction>

          <!-- 工作经历 -->
          <categoryIntroduction slotName="workExperience" :resumeInfo="resumeData" titleName="工作经历">
            <div slot="workExperience" slot-scope="scope">
              <li v-for="(item,index) in scope.data.workInfoOutVos" :key="index" class="brief workExperience">
                <p>{{item.workTime || '2013.08- 2017.7'}}
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.company}}</p>
                <p>{{item.job || '暂无'}} | {{item.preTaxWage || '暂无'}} </p>
                <p>工作职责：{{item.remark || '暂无'}}</p>
              </li>
            </div>
          </categoryIntroduction>

          <!-- 语言能力 -->
          <categoryIntroduction slotName="LanguageAbility" :resumeInfo="resumeData" titleName="语言能力">
            <div slot="LanguageAbility" slot-scope="scope">
              <el-row v-for="(item,index) in scope.data.lagInfoOutVos" :key="index">
                <el-col :span="12">
                  <div class="grid-content bg-purple brief">
                    语言：{{item.languageText || '暂无'}}
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light brief">
                    熟练程度：{{item.proficiencyText || '暂无'}}
                  </div>
                </el-col>
              </el-row>
            </div>
          </categoryIntroduction>

          <!-- 学习经历 -->
          <categoryIntroduction slotName="LearningExperience" :resumeInfo="resumeData" titleName="学习经历">
            <div slot="LearningExperience" slot-scope="scope">
              <li v-for="(item,index) in scope.data.trainInfoOutVos"
                v-if="scope.data.trainInfoOutVos && scope.data.trainInfoOutVos.length>0" :key="index" class="brief">
                <p>{{item.traTime || '2013.08- 2017.7'}}</p>
                <p>{{item.institution || '暂无'}} | {{item.course || '暂无'}} | {{item.content || '暂无'}}</p>
              </li>
              <li class="brief" v-if="!scope.data.trainInfoOutVos">暂无</li>
            </div>
          </categoryIntroduction>

          <!-- 自我介绍 -->
          <categoryIntroduction slotName="introduceOneself" :resumeInfo="resumeData" titleName="自我介绍">
            <div slot="introduceOneself" slot-scope="scope">
              <div v-if="scope.data.skillInfoOutVos && scope.data.skillInfoOutVos.length>0">
                <p>技能及特长：</p>
                <el-row v-for="(item,index) in scope.data.skillInfoOutVos" :key="index">
                  <el-col :span="12">
                    <div class="grid-content bg-purple brief">
                      技能名称：{{item.name || '暂无'}}
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light brief">
                      使用时长：{{item.useDuration || '暂无'}}
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div v-if="scope.data.awardInfoOutVos && scope.data.awardInfoOutVos.length>0">
                <p>成果及获奖情况：</p>
                <el-row v-for="(item,index) in scope.data.awardInfoOutVos" :key="index">
                  <el-col :span="12">
                    <div class="grid-content bg-purple brief">
                      奖项名称：{{item.name || '暂无'}}
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light brief">
                      获得时间：{{item.gainTime || '暂无'}}
                    </div>
                  </el-col>
                </el-row>
              </div>

              <p class="brief">兴趣爱好：</p>
              <p class="brief">{{scope.data.interest || '暂无'}}</p>
              <p class="brief">自我评价：</p>
              <p class="brief">{{scope.data.evaluation || '暂无'}}</p>
            </div>
          </categoryIntroduction>

          <div class="noContacts" v-show="false">
            <h6>简历不存在</h6>
          </div>
        </div>
      </el-scrollbar>
      <div class="recent contacts recentContacts">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content bg-purple btn">
              <el-button type="primary" @click="updateresumeDeliver">
                不合适
              </el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple btn">
              <el-button type="primary" @click="insertresumeDeliver">
                邀请投递
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-else class="noContacts">
      <h6> 简历未审核通过</h6>
    </div>
  </div>
</template>

<script>
import categoryIntroduction from './categoryIntroduction'
// 模拟选择 请求联系人查看简历详情信息
import { getjobIddetail, insertresumeDeliver, updateresumeDeliver } from '@/api/chat'
import bus from '@/components/common/bus';
export default {
  components: {
    categoryIntroduction
  },
  data () {
    return {
      btnDisabled: true,
      resumeData: {},
      // 信息数量
      num: 100,
      // loading
      loading: false,
      // 动态class
      infoIsActive: 0,
      contactInfo: { qi: 456 },
      JobHunting: { qi: '456asdas' },
      Educational: [{ time: '2013.08- 2017.7', scoll: '清华大学', cr: '飞行器动力工程（哲学类）', xl: '本科' }, { time: '2013.08- 2017.7', scoll: '清华大学', cr: '飞行器动力工程（哲学类）', xl: '本科' }, { time: '2013.08- 2017.7', scoll: '清华大学', cr: '飞行器动力工程（哲学类）', xl: '本科' }],
      workExperience: [{ starTime: '2013.08', endTime: '至今', gs: '智联招聘', zwmc: '职位名称（职位类别）', xz: '10000元/月', workZe: '需求分析阶段:通过市场调研(行业动态) 、竞品分析(我要打工网、职多多)、数据分析、用户画像用户属性、特征、行为)、5W1H、用户反馈等收集需求，同时负责收集评估领导及公司各部门的需进行需求提炼及优先级排序;产品设计阶段: 将需求转化为产品功能，梳理产品业务流程、进行前端、后台产品设计、交付产品原型产品需求文档;项目协调阶段: 与开发确定开发排期、进行效果图的评审、跟进开发进度及测试、与运营和编辑沟通上时的内容、活动运营、数据更新，保证项目如期上线;产品上线后: 捕捉用户反馈、优化产品细节、进行产品迭代;效果回归阶段: 组织公司全体人员内测及上线工作，验证市场效果;' }],
      // 简历ID
      // resumeId: '',
      // 联系人信息,
      isShowResumeContact: 0,
      isShresume: false
    }
  },
  props: {
    switchContactsInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {},
  watch: {
    switchContactsInfo: {
      handler (val) {
        // this.resumeId = val.resumeId
        if (val) {
          this.getjobIddetail(val)
        } else {
          this.loading = false
        }
      },
      deep: true,  // 可以深度检测到 switchContactsInfo 对象的属性值的变化
      // immediate: true
    }
  },
  methods: {
    // 获取简历详情
    getjobIddetail (val) {
      if (!val || !val.resumeId) return false
      this.loading = true
      getjobIddetail(val).then((res) => {
        if (res.success) {
          console.log(res.data, ' this.resumeData = res.data')
          this.resumeData = res.data
          this.loading = false
          this.isShresume = true
        } else {
          this.loading = false
          this.isShresume = false
        }
      })
    },
    // 邀请投递
    insertresumeDeliver () {
      var message = this.switchContactsInfo.senderUserName + "邀请您投递" + this.switchContactsInfo.jobName + "职位！";
      // 传递消息
      bus.$emit('invited', message)
    },
    // 不合适
    updateresumeDeliver () {
      var chatMessage = {
        jobId: this.switchContactsInfo.jobId,  // 新增属性
        resumeId: this.switchContactsInfo.resumeId,  // 新增属性
        chatId: this.switchContactsInfo.chatId,
        senderUserId: this.switchContactsInfo.senderUserId, // '2', //我自己
        senderUserName: this.switchContactsInfo.senderUserName,
        senderUserAccountType: this.switchContactsInfo.senderUserAccountType,
        receiverUserId: this.switchContactsInfo.receiverUserId, // '1', // 对方
        receiverUserName: this.switchContactsInfo.receiverUserName,
        receiverUserAccountType: this.switchContactsInfo.receiverUserAccountType,
        content: '您的简历已经被 ' + this.switchContactsInfo.senderUserName + ' 标记为不合适！',
        // 类型
        operationType: 3,
        msgType: 2
      };
      // this.stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(chatMessage));
      // 传递到 chatWindow 组件 执行socket方法
      bus.$emit('updateResumeDeliver', chatMessage)
    }
  },
  created () {
    this.getjobIddetail()
    bus.$on('isShowResumeContact', res => {
      this.isShowResumeContact = res
    })
  },
  mounted () {

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.contactsInfo {
    width: calc(100% - 50px);
    height: 502px;
    overflow: scroll;
    padding: 0 25px;
}
.recentContacts {
    width: 100%;
    height: 48px;
    text-align: left;
    line-height: 49px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 600;
    color: rgba(85, 85, 85, 1);
    /* border-right: 1px solid rgba(232, 232, 232, 1);
    border-bottom: 1px solid rgba(232, 232, 232, 1); */
    border: 1px solid rgba(232, 232, 232, 1);
    border-left: none;
}

.recentContacts .recent {
    display: inline-block;
    width: 136px;
    text-align: center;
}

.avatarInfo {
    width: 100%;
    height: 116px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.avatarInfo .name {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    /* margin-left: 18px; */
}

.brief {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 26px;
    color: rgba(34, 34, 34, 1);
}
.brief .el-divider--vertical {
    margin: 0 4px;
}

.workExperience {
    margin-top: 20px;
}
.workExperience p {
    line-height: 30px;
}
.noContacts {
    height: 100%;
    text-align: center;
    /* line-height: 593px; */
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(232, 232, 232, 1);
}
.btn {
    text-align: center;
}
.portraitBox {
    background: url('../../../../assets/img/logo.png') no-repeat;
    background-size: 100% 100%;
}

.portraitGirl {
    background: url('../../../../assets/img/logoG.png') no-repeat;
    background-size: 100% 100%;
}
.avatarInfo .el-avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50%;
    margin: 0 20px 0 0px;
}
.noContacts {
    height: 100%;
    text-align: center;
    height: 350px;
    /* line-height: 593px; */
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 200;
    color: rgba(153, 153, 153, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(232, 232, 232, 1);
}

.avatarInfo /deep/ .el-avatar > img {
    width: 100%;
}
</style>